.c-custom-checkbox {
    $d: 14px;
    display: flex;
    align-items: center;

    label {
        @include userSelectNone();
        display: flex;
        align-items: center;
    }

    &__box {
        @include nice-input();
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: $d;
        width: $d;
        height: $d;
        margin-right: $interiorMarginSm;
    }

    input {
        opacity: 0;
        position: absolute;

        &:checked + label > .c-custom-checkbox__box {
            background: $colorKey;
            &:before {
                color: $colorKeyFg;
                content: $glyph-icon-check;
                font-family: symbolsfont;
                font-size: 0.6em;
            }
        }

        &:not(:disabled) + label {
            cursor: pointer;
        }

        &:disabled + label {
            opacity: 0.5;
        }
    }
}
